$(function () {
    cllStatistics();
    cllOwnership();
    cllCartype();
    stayTime();
    vm.cllYesterdayTodayThismonth();
    /*vm.cllSouthNorthStatistics();
    vm.cllOwnership();
    vm.cllCartype();*/
    $("#jqGrid").jqGrid({
        url: baseURL + 'cll/cllvehiclerecord/list',
        datatype: "json",
        colModel: [			
			/*{ label: 'id', name: 'id', index: 'id', width: 50, key: true },*/
			{ label: '过车事件', name: 'crossTime', index: 'cross_time', width: 80,align: "center",},
			{ label: '事件唯一标识', name: 'eventId', index: 'event_id', width: 80 }, 			
			{ label: '车牌号', name: 'plateNo', index: 'plate_no', width: 80 }, 			
			{ label: '车辆类型', name: 'vehicleType', index: 'vehicle_type', width: 80 }, 			
			{ label: '车牌类型', name: 'plateType', index: 'plate_type', width: 80 }, 			
			{ label: '卡口点编号', name: 'monitoringId', index: 'monitoring_id', width: 80 }, 			
			{ label: '卡口点名称', name: 'monitoringName', index: 'monitoring_name', width: 80 }, 			
			{ label: '车牌图片', name: 'platePicUri', index: 'plate_pic_uri', width: 80 }, 			
			{ label: '车辆图片', name: 'carPicUri', index: 'car_pic_uri', width: 80 }, 			
			{ label: '图片服务唯一标识', name: 'aswSyscode', index: 'asw_syscode', width: 80 }, 			
			{ label: '事件唯一标识', name: 'uuid', index: 'uuid', width: 80 }, 			
			{ label: '速度', name: 'speed', index: 'speed', width: 80 }			
        ],
		viewrecords: true,
        height: 385,
        rowNum: 20,
		rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
        	//隐藏grid底部滚动条
        	/*$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); */
        }
    });
});

var vm = new Vue({
	el:'#rrapp',
	data:{
		showList: true,
		title: null,
		cllVehicleRecord: {},
        q:{
		    type:null,
            startTime:null,
            endTime:null
        }
	},
	methods: {
	    cllYesterdayTodayThismonth:function(){
            var today=null;
            var todays=null;
            var todayn=null;
            var yesterday=null;
            var yesterdays=null;
            var yesterdayn=null;
            var thismoth=null;
            var thismoths=null;
            var thismothn=null;
            $.ajax({
                type: "POST",
                url: baseURL + "cll/cllvehiclerecord/cllYesterdayTodayThismonth",
                contentType: "application/json",
                success: function(r){
                   var today1=r.today;
                   var yesterday1= r.yesterday;
                   var thismoth1= r.thismoth;
                    todays=today1[0].length;
                    todayn=today1[1].length;
                    today=todays+todayn;
                    yesterdays=yesterday1[0].length;
                    yesterdayn=yesterday1[1].length;
                    yesterday=yesterdays+yesterdayn;
                    thismoths=thismoth1[0].length;
                    thismothn=thismoth1[1].length;
                    thismoth=thismoths+thismothn;
                    $("#today").html(today);
                    $("#todays").html(todays);
                    $("#todayn").html(todayn);
                    $("#yesterday").html(yesterday);
                    $("#yesterdays").html(yesterdays);
                    $("#yesterdayn").html(yesterdayn);
                    $("#thismoth").html(thismoth);
                    $("#thismoths").html(thismoths);
                    $("#thismothn").html(thismothn);
                }
            });
        },
		query: function () {
			vm.reload();
		},
		add: function(){
			vm.showList = false;
			vm.title = "新增";
			vm.cllVehicleRecord = {};
		},
		update: function (event) {
			var id = getSelectedRow();
			if(id == null){
				return ;
			}
			vm.showList = false;
            vm.title = "修改";
            
            vm.getInfo(id)
		},
		saveOrUpdate: function (event) {
		    $('#btnSaveOrUpdate').button('loading').delay(1000).queue(function() {
                var url = vm.cllVehicleRecord.id == null ? "cll/cllvehiclerecord/save" : "cll/cllvehiclerecord/update";
                $.ajax({
                    type: "POST",
                    url: baseURL + url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.cllVehicleRecord),
                    success: function(r){
                        if(r.code === 0){
                             layer.msg("操作成功", {icon: 1});
                             vm.reload();
                             $('#btnSaveOrUpdate').button('reset');
                             $('#btnSaveOrUpdate').dequeue();
                        }else{
                            layer.alert(r.msg);
                            $('#btnSaveOrUpdate').button('reset');
                            $('#btnSaveOrUpdate').dequeue();
                        }
                    }
                });
			});
		},
		del: function (event) {
			var ids = getSelectedRows();
			if(ids == null){
				return ;
			}
			var lock = false;
            layer.confirm('确定要删除选中的记录？', {
                btn: ['确定','取消'] //按钮
            }, function(){
               if(!lock) {
                    lock = true;
		            $.ajax({
                        type: "POST",
                        url: baseURL + "cll/cllvehiclerecord/delete",
                        contentType: "application/json",
                        data: JSON.stringify(ids),
                        success: function(r){
                            if(r.code == 0){
                                layer.msg("操作成功", {icon: 1});
                                $("#jqGrid").trigger("reloadGrid");
                            }else{
                                layer.alert(r.msg);
                            }
                        }
				    });
			    }
             }, function(){
             });
		},
		getInfo: function(id){
			$.get(baseURL + "cll/cllvehiclerecord/info/"+id, function(r){
                vm.cllVehicleRecord = r.cllVehicleRecord;
            });
		},
		reload: function (event) {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{ 
                page:page,
                postData:{
                    "startTime":$("#beginTime").val(),
                    "endTime":$("#endTime").val(),
                    "monitoringId":$("#monitoringId").val(),
                    "plateNo":$("#plateNo").val(),
                    "vehicleType":$("#vehicleType").val(),
                }
            }).trigger("reloadGrid");
		}
	}
});
//车流量
function cllStatistics(){
    $.ajax({
        type: "POST",
        url: baseURL + "cll/cllvehiclerecord/cllSouthNorthStatistics?type="+vm.q.type+"&startTime="+vm.q.startTime+"&endTime="+vm.q.endTime,
        contentType: "application/json",
        success: function(r){
            var southlist=r.south;
            var northlist=r.north;
            var myChart = echarts.init(document.getElementById('cllStatistics'));
            var option = {
                tooltip : {
                    trigger: 'axis',
                    formatter: function(params) { //自定义函数修改折线图给数据加单位
                        var str = '';//声明一个变量用来存储数据
                        str += '<div>'+ params[0].name +'</div>'; //显示首行的函数
                        for(var i=0; i<params.length; i++) { //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
                            str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'+ params[i].seriesName +'</span> : <span>'+ params[i].data+'车次' +'</br>';
                        }
                        return str;
                    }
                },
                grid: {
                    x: 50,
                    y:20,
                    y2:20,
                    borderWidth: 0
                },
                legend: {
                    data:['南区','北区'],
                    textStyle:{
                        color:"black"
                    },
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        name:'日期',
                        boundaryGap : false,
                        data :southlist[0],
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#a4a7ab',
                                align: 'center'
                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name:'总数/车次',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#a4a7ab'
                            }
                        }

                    }
                ],
                series : [
                    {
                        name:'南区',
                        type:'line',
                        //stack: '车次',
                        data:southlist[1],
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color:"#e15828"
                            }
                        }
                    },
                    {
                        name:'北区',
                        type:'line',
                        //stack: '车次',
                        smooth: true,
                        data:northlist[1],
                        itemStyle: {
                            normal: {
                                color:"#2e7cff"
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
    });

}
//归属地
function cllOwnership(){
    var areaname=[];
    var areavalue=[];
    $.ajax({
        type: "POST",
        url: baseURL + "cll/cllvehiclerecord/cllOwnership?type="+vm.q.type+"&startTime="+vm.q.startTime+"&endTime="+vm.q.endTime,
        contentType: "application/json",
        success: function(r){
            var ownership=r.carownership;
            for (let i = 0; i <ownership.length ; i++) {
                areaname.push(ownership[i].areaname);
                areavalue.push(ownership[i].yvalie);
            }
            var myChart = echarts.init($("#cllOwnership")[0]);
            var option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function(params) { //自定义函数修改折线图给数据加单位
                        var str = '';//声明一个变量用来存储数据
                        str += '<div>'+ params[0].name +'</div>'; //显示首行的函数
                        for(var i=0; i<params.length; i++) { //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
                            str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'+ params[i].seriesName +'</span> : <span>'+ params[i].data+'车次' +'</br>';
                        }
                        return str;
                    }
                },
                grid: {
                    x: 50,
                    y:20,
                    y2:40,
                    borderWidth: 0
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        name:'省份',
                        data:areaname,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#a4a7ab',
                                align: 'center'
                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name:'总数/车次',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#a4a7ab'
                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'数量（辆）',
                        type:'bar',
                        /*barWidth:'30',*/
                        data:areavalue,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black'
                                        /*fontSize: 16*/
                                    }
                                },
                                color:"#2e7cff"
                            }
                        }

                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
    });

}
//南北区车辆类型对比
function cllCartype(){
    var southvalue=[];
    var southlegend=[];
    var northvalue=[];
    var northlegend=[];
    $.ajax({
        type: "POST",
        url: baseURL + "cll/cllvehiclerecord/cllCartype?type="+vm.q.type+"&startTime="+vm.q.startTime+"&endTime="+vm.q.endTime,
        contentType: "application/json",
        success: function(r){
            var sou=r.southcartype;
            var nor=r.northcartype;
            for (let i = 0; i <sou.length ; i++) {
                southlegend.push(sou[i].areaname);
                southvalue.push({
                    value:sou[i].yvalie,name:sou[i].areaname,itemStyle:{
                       /* normal:{
                            color:clor[i]
                        }*/
                    }
                });
            }
            for (let i = 0; i <nor.length ; i++) {
                northlegend.push(nor[i].areaname);
                northvalue.push({
                    value:nor[i].yvalie,name:nor[i].areaname,itemStyle:{
                       /* normal:{
                            color:clor[i]
                        }*/
                    }
                });
            }
            //南区
            var myChart = echarts.init($("#cllCartypesouth")[0]);
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a}<br/>{b}:{c}"+"辆"+"({d}%)",

                    /*position: [40, 150] */
                },
                title: {
                    text: '南区',
                    textStyle: {
                        color: "black"

                    },
                    x: 'center'

                },
                legend: {
                    x:'1%',
                    orient: 'vertical',
                    data:southlegend,
                },
                calculable: false,
                series: [
                    {
                        name: '车辆类型',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data:southvalue,
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });

            var myChart1 = echarts.init($("#cllCartypenorth")[0]);
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter:"{a}<br/>{b}:{c}"+"辆"+"({d}%)",
                    /*position: [40, 150] */
                },
                title: {
                    text: '北区',
                    textStyle: {
                        color: "black"

                    },
                    x: 'center'

                },
                legend: {
                    x:'1%',
                    orient: 'vertical',
                    data: northlegend
                },
                calculable: false,
                series: [
                    {
                        name: '车辆类型',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: northvalue,
                    }
                ]
            };
            myChart1.setOption(option);
            window.addEventListener("resize",function(){
                myChart1.resize();
            });
        }
    });
}
//近七天 近三十天点击事件
function goquery(data){
   vm.q.type=data;
    cllStatistics();
    cllOwnership();
    cllCartype();
}
//查询 按钮点击事件
function submit(){
    vm.q.startTime= $("#beginTime").val();
    vm.q.endTime=$("#endTime").val();
    if(vm.q.startTime == ""){
        alert("请选择开始时间");
    }else if(vm.q.endTime == ""){
        alert("请选择结束时间");
    }else {
        cllStatistics();
        cllOwnership();
        cllCartype();
    }

}
//平均逗留市场
function modalClose() {
    //$("#myModal").modal('hide');
    $('#PerExcelModal').modal('hide');
    $(".modal-backdrop").remove();
    $("body").removeClass('modal-open');
    //$("#d").trigger('click');
}


function stayTime(){
    $.ajax({
        type: "POST",
        url: baseURL + "cll/cllvehiclerecord/stayTime",
        contentType: "application/json",
        success:function(r){
                $("#stayTime").html(r.stayTime[0]);
                $("#stayTimes").html(r.stayTime[1]);
                $("#stayTimen").html(r.stayTime[2]);
        }
    })
}
function cllExp(){
    window.location.href =  baseURL + "cll/cllvehiclerecord/upload?type="+vm.q.type+"&startTime="+vm.q.startTime+"&endTime="+vm.q.endTime;
}